<template>
	<view class="co-rider">
		<NavBar title="合作骑手" right="search" @rightTap="search" />
		<view class="content">
			<view class="switch-bar" :style="{top:top}">
				<view class="switch-item" :class="status==1?'a-switch-item':''" @tap="tapSwitch(1)"> 全部 </view>
				<view class="switch-item" :class="status==2?'a-switch-item':''" @tap="tapSwitch(2)"> 合作中 </view>
				<view class="switch-item" :class="status==3?'a-switch-item':''" @tap="tapSwitch(3)"> 终止合作 </view>
			</view>
			<view class="rider-list" v-if="riderList.length">
				<view class="rider-item" v-for="(item, index) in riderList" :key="item">
					<view class="rider-status">
						<view class="status" :class="item.status==1?'a-status':''"> {{item.status==1?'合作中':'终止合作'}} </view>
						<view class="btn" @tap="openModal(item.member_id, index)" v-if="item.status==1"> 终止合作 </view>
						<view class="btn" @tap="openModal(item.member_id, index, 'del')" v-if="item.status==0"> 删除骑手 </view>
					</view>
					<view class="rider-info">
						<image :src="item.avatar" class="rider-avatar" />
						<view class="rider-details">
							<view class="rider-name"> {{item.name}} </view>
							<view class="rider-percent">
								<view class="per-num"> 好评率：{{item.good_comment}}%</view>
								<BFB :bfb="item.good_comment+'%'" />
							</view>
							<view class="rider-address"> {{item.region_info}} </view>
						</view>
					</view>
				</view>
			</view>
			<Empty txt="这里空荡荡的~" v-else/>
		</view>
		<view class="btn-box">
			<view class="btn" @tap="addRider"> 添加骑手 </view>
		</view>
		<Modal ref="modalRef" @confirm="stopCooper" title="终止合作" textarea="请填写终止合作的理由"/>
		<Modal ref="delModalRef" @confirm="delRider" title="删除骑手" tips="确定要删除该骑手吗？"/>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onShow, onReachBottom } from '@dcloudio/uni-app' 
	import BFB from '@/components/BFB.vue';
	import Modal from '@/components/Modal.vue';
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import { GetMyRiderListApi, StopRiderApi, DelRiderApi } from '@/service/shop.js'
	const { safeArea } = uni.getSystemInfoSync()
	const modalRef = ref()
	const delModalRef = ref()
	const status = ref(1)
	const riderList = ref([])
	const total = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const searchVal = ref('')
	const top = computed(() => safeArea.top + 44 + 'px')
	const tapSwitch = (id) => {
		if(status.value == id) return
		status.value = id
		page.value = 1
		riderList.value = []
		getRiderList()
	}
	const search =  (val) => {
		searchVal.value = val
		page.value = 1
		riderList.value = []
		getRiderList()
	}
	// 终止合作
	const memberId = ref()
	const riderIndex = ref()
	const openModal = (id, index, del) => {
		memberId.value = id
		riderIndex.value = index
		if(del) return delModalRef.value.open()
		modalRef.value.open()
	}
	const stopCooper = (msg) => {
		const params = {
			member_id: memberId.value,
			msg
		}
		StopRiderApi(params).then(res => {
			riderList.value[riderIndex.value].status = 0
			modalRef.value.close()
			getApp().globalData.toast('操作成功')
		})
	}
	// 删除骑手
	const delRider = () => {
		DelRiderApi({member_id: memberId.value}).then(res => {
			riderList.value.splice(riderIndex.value, 1)
			delModalRef.value.close()
			getApp().globalData.toast('操作成功')
		})
	}
	const getRiderList = () => {
		let params = {
			status: status.value,
			page: page.value,
			page_size: pageSize.value,
			filters: {
				search: searchVal.value
			}
		}
		GetMyRiderListApi(params).then(res => {
			riderList.value = res.data
			total.value = res.total
		})
	}
	const addRider = () => {
		uni.navigateTo({
			url: '/pages/shopPages/coRider/addRider'
		})
	}
	onShow(() => {
		getRiderList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getRiderList()
	})
</script>

<style scoped lang="scss">
	.co-rider {
		padding-bottom: 60px;
		.content {
			padding: 0 12px 10px;
			.switch-bar {
				position: sticky;
				left: 0;
				right: 0;
				display: flex;
				align-items: center;
				background-color: #f4f5f7;
				.switch-item {
					flex: 1;
					height: 28px;
					color: #555555;
					font-size: 14px;
					font-weight: 400;
					line-height: 28px;
					text-align: center;
					&.a-switch-item {
						color: #FF3B1E;
						font-size: 16px;
						font-weight: 500;
						position: relative;
						&::before {
							display: block;
							content: '';
							width: 26px;
							height: 4px;
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							border-radius: 33px;
							background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
						}
					}
				}
			}
			.rider-list {
				padding: 10px 0 0;
				.rider-item {
					border-radius: 10px;
					margin-bottom: 10px;
					padding: 0 10px 10px;
					background-color: #fff;
					.rider-status {
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #EEEEEE;
						box-sizing: border-box;
						.status {
							color: #999999;
							font-size: 14px;
							font-weight: 400;
							&.a-status {
								color: #FF3B1E;
							}
						}
						.btn {
							width: 68px;
							height: 22px;
							display: flex;
							align-items: center;
							justify-content: center;
							color: #333333;
							font-size: 12px;
							font-weight: 400;
							background: #FFFFFF;
							border-radius: 151px;
							border: 1px solid #999999;
							box-sizing: border-box;
						}
					}
					.rider-info {
						display: flex;
						align-items: center;
						padding-top: 10px;
						.rider-avatar {
							width: 54px;
							height: 54px;
							border-radius: 50%;
							margin-right: 10px;
						}
						.rider-details {
							flex: 1;
							.rider-name {
								color: #333333;
								font-size: 16px;
								font-weight: 400;
								line-height: 17px;
								margin-bottom: 10px;
							}
							.rider-percent {
								display: flex;
								align-items: center;
								margin-bottom: 10px;
								.per-num {
									color: #666666;
									font-size: 14px;
									font-weight: 400;
									line-height: 17px;
									margin-right: 4px;
								}
							}
							.rider-address {
								color: #666666;
								font-size: 14px;
								font-weight: 400;
								line-height: 17px;
							}
						}
					}
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			padding:0 12px 10px;
			background-color: #f4f5f7;
			.btn {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}

</style>
